<template>
  <div class="popup flex-center flex-align-items-center">
    <div class="main">
      <div class="main-header">
        <p>关联Shopify店铺</p>
        <i class="iconfont icon-guanbi" @click="close"></i>
      </div>
      <div class="main-bottom">
        <h1 class="font-14">第一步：输入您的店铺地址，然后点击【确定】按钮</h1>
        <div class="form flex-between flex-align-items-center">
          <div class="left flex flex-align-items-center">
            <p class="font-14">https://</p>
            <el-input v-model="form.url" placeholder="请输入"></el-input>
            <p class="font-14">.myshopify.com</p>
          </div>
          <p class="right font-14 pointer" @click="submit">确定</p>
        </div>
        <img src="@/assets/img-shopify.jpg">
        <h1 class="font-14"> 第二步：在打开的页面登录您的Shopify账号，并授权店铺信息给WotoHub </h1>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineEmits, ref } from 'vue';
import api from '@/api/index';
import { ElMessage, ElLoading } from 'element-plus';

const emit = defineEmits(['close', 'change']);

const form = ref({});
const ruleFormRef = ref();

const close = () => {
  emit('close', null);
}
const submit = () => {
  if (!form.value.url) {
    ElMessage.error('店铺地址不能为空');
    return
  }
  window.open(`https://${form.value.url}.myshopify.com/admin/oauth/authorize?client_id=4d7a8c2785d8521be2c9176270ca450c&scope=read_analytics%2Cread_discounts%2Cwrite_discounts%2Cread_orders%2Cread_products%2Cread_price_rules%2Cwrite_price_rules&redirect_uri=https%3A%2F%2Fapi.wotokol.com%2Fkoc%2Fauth%2FshopifyCallback&state=b73398a368881fc0e9eea80320520379b725142d8600d80bae1707def02a8427&grant_options%5B%5D=`, '_blank');
}
</script>

<style lang="less" scoped>
.popup {
  .main {
    position: relative;
    width: 638px;
    border-radius: 10px;
    background: #fff;

    .main-bottom {
      padding: 16px 24px;

      h1 {
        color: #333;
        margin-bottom: 24px;
      }

      .form {
        margin-bottom: 24px;

        .left {
          p {
            color: #606266;
          }

          &::v-deep {
            .el-input {
              width: 202px;
              height: 32px;
              margin: 0 4px;
            }
          }
        }

        .right {
          width: 72px;
          height: 32px;
          background: @main-color;
          border-radius: 2px;
          color: #fff;
          text-align: center;
          line-height: 32px;
        }
      }

      img {
        width: 100%;
        margin-bottom: 24px;
      }
    }
  }
}
</style>
